<template>
    <div class="shopcarContainer">
        <el-row v-show="gotSomething" :gutter="15" justify="space-around">
            <el-col :span="6" v-for="(item,index) in shopcarList" :key="index">
                <el-card :body-style="{ padding: '0'}">
                    <img
                        @click="goDetail(item.shopcargoods)"
                        :src="item.shopcargoods.goodCoverImg"
                        class="image"
                    />
                    <div
                        class="cardContent"
                        :title="item.shopcargoods.goodName"
                        style="padding: 8px;"
                    >
                        <span>{{item.shopcargoods.goodName}}</span>
                        <div class="bottom clearfix price">
                            <time class="time">{{ item.shopcargoods.goodPrice }}￥</time>
                        </div>
                        <div class="cardfooter">
                            <el-button @click="remove(item,index)" size="mini" type="danger">移除</el-button>
                            <!-- <el-button @click="addToOrder(item,index)" size="mini" type="success">下单</el-button> -->
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div v-show="!gotSomething" class="whennone">
            <el-link @click="goproducts" style="font-size:20px" type="primary">空空,去逛逛吧~！</el-link>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            shopcarList: [],
            gotSomething: false
        };
    },
    methods: {
        // 获取购物车商品列表
        getShopcarList() {
            this.shopcarList = this.$store.getters.getshopcarList;
            if (this.shopcarList.length < 1) {
                this.gotSomething = false;
            } else {
                this.gotSomething = true;
            }
        },
        // 跳转详细页
        goDetail(item) {
            this.$router.push({ name: "details", params: { id: item.id } });
        },
        // 移除购物车
        remove(item, index) {
            alert("Ss");
            this.$ajax
                .delete("shopcar/" + item.id)
                .then(res => {
                    //console.log(res.data);
                    this.shopcarList.splice(index, 1);
                    this.$store.commit("updateShopcar", this.shopcarList);
                    this.$message({
                        message: "移除操作成功!",
                        type: "success"
                    });
                })
                .catch(err => {
                    console.log("remove --- error");
                });
        },
        // 去逛逛
        goproducts() {
            this.$router.push({ name: "products" });
        },
        // 添加订单
        addToOrder(item, index) {}
    },
    mounted() {
        this.getShopcarList();
    }
};
</script>


<style lang="scss" scoped>
.shopcarContainer {
    img {
        width: 100%;
        height: 100%;
    }
    .el-card {
        margin: 4px;
    }
    .cardContent {
        text-align: center;
        white-space: nowrap;
        // text-overflow:ellipsis;
        span {
            font-size: 12px;
            color: #ccc;
            display: inline-block;
            width: 100%;
            // white-space: nowrap;
            //text-overflow:'...';
        }
        .price {
            font-size: 14px;
            color: red;
        }
        .cardfooter {
            margin-top: 5px;
            display: flex;
            justify-content: space-around;
        }
    }
    .whennone {
        width: auto;
        height: 350px;
        background-color: #ccc;
        text-align: center;
        display: flex;
        opacity: 0.5;
        border-radius: 5px;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
    }
}
</style>